
<template>
	<div class="navbar">
	    <div class="container">
	        <div class="row">
	            <div class="col s2">
	                <div class="content-left">
	                    <a href="#" @click="noMenus()" class="sidebar"><i class="fas fa-bars"></i></a>
	                </div>
	            </div>
	            <div class="col s8">
	                <div class="content-center">
	                    <a href="index.html"><h1>贵州梵添科技</h1></a>
	                </div>
	            </div>
	          
	        </div>
	    </div>
	</div>

	<div class="daohang" @click="handleALL" v-if="isShow">
		<ul  id="box" class="daohang_box">
			<li v-for="(item,index) in menus" :key="item.id" :class=" item.id == menusId ? 'active':'' " >
				<router-link :to="item.routeType+'?classId='+item.id"><i class="fas fa-sign-out-alt"></i>{{item.title}}</router-link>
			</li>
		</ul>
	</div>

</template>
<script setup>
	import api from "@/api/index"
	let menus=ref([])
	let menusId=ref(undefined)
	let isShow=ref(false)
	const router = useRouter()
	// 监听当前路由 router.currentRoute.value.path
	watch(() =>router.currentRoute.value.query.classId,(newValue,oldValue)=> {
		menusId.value=newValue
	    //console.log(newValue);
	},{ 
		immediate: true//初始化监听
	})
	onBeforeMount(()=>{
		//导航
		api.getMenu().then(res => {
			menus.value=res.data.data
			// console.log(res.data.data);
		})
		
		
	});
	const handleALL=(event)=>{
　　　	//　3.重点----点击到了id为box以外的区域 就判断为false
　　　　　var one = document.getElementById("box");
　　　　　if(one){
　　　　　　　　if(!one.contains(event.target)){
				//console.log("false")
　　　　　　　	isShow.value = false
　　　　　　　}
　　　　　}
	}
	const noMenus=()=>{
		isShow.value=true
		//alert("333")
	}
	
	// defineProps({
	// 	menus:{
	// 		type:Array,
	// 		default:[]
	// 	}
	// })
</script>
<style scoped>
	.daohang .active{background:linear-gradient(310deg,rgb(159,176,206),rgb(197,225,234) );}
</style>
